import {
    View, TextInput, Text, TouchableOpacity, ScrollView,
} from 'react-native';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import {
    Toast, WingBlank, Modal, WhiteSpace,
} from '@ant-design/react-native';
import moment from 'moment';
import FilePickerManager from 'react-native-file-picker';
import Feather from 'react-native-vector-icons/Feather';
import FileViewer from 'react-native-file-viewer';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { AccDetail, editReport } from '../../../../../comconfig/sqlfun';
import styles from './styles';
import { debounce } from '../../../../../utils/common';

const AccRpDetail = ({ navigation, route }) => {
    const { id } = route.params;
    const [detail, setDetail] = useState({});
    const [value, onChangeTextVal] = useState('');
    const [fileUrls, setFileUrl] = useState([]);
    const getDetail = async () => {
        try {
            const list = await AccDetail(parseInt(id, 10));
            setDetail(JSON.parse(list));
        } catch (error) {
            Toast.info('获取数据失败', 1, undefined, false);
        }
    };
    useEffect(() => {
        getDetail();
    }, []);
    useEffect(() => {
        onChangeTextVal(detail.report);
        if (JSON.stringify(detail) !== '{}') {
            setFileUrl(JSON.parse(detail.fileurls));
        }
    }, [detail]);
    navigation.setOptions({
        title: `${detail.title}的验收报告`,
        headerTitleStyle: {
            color: '#0079FF',
            fontSize: 22,
        },
    });
    const pickFile = () => {
        FilePickerManager.showFilePicker(null, (response) => {
            if (response.didCancel) {
                Toast.info('已取消', 1, undefined, false);
            } else if (response.error) {
                Toast.info(response.error, 1, undefined, false);
            } else {
                setFileUrl([...fileUrls, { fileName: response.fileName, path: response.path }]);
            }
        });
    };
    const delFile = (i) => {
        Modal.operation([
            {
                text: '删除',
                onPress: () => {
                    const copyFiles = [...fileUrls];
                    copyFiles.splice(i, 1);
                    setFileUrl(copyFiles);
                },
                style: { color: '#0F8DE9' },
            },
        ]);
    };
    const edit = () => {
        editReport(parseInt(id, 10), value, fileUrls);
    };
    navigation.setOptions({
        headerRight: () => (
            <TouchableOpacity
                onPress={() => debounce(() => {
                    edit();
                    navigation.goBack();
                })}
            >
                <AntDesign
                    name="form"
                    size={26}
                    color="#017BFF"
                    style={{ marginRight: 5 }}
                />
            </TouchableOpacity>
        ),
    });
    return (
        <View>
            <ScrollView>
                <View style={{ backgroundColor: '#FFF' }}>
                    <WingBlank>
                        <WhiteSpace />
                        <Text style={styles.title}>报告内容</Text>
                        <WhiteSpace />
                        <TextInput
                            multiline
                            placeholder="报告内容"
                            placeholderTextColor="#5d5d7e"
                            style={styles.input}
                            maxLength={200}
                            onChangeText={text => onChangeTextVal(text)}
                            value={value}
                            returnKeyLabel="done"
                        />
                    </WingBlank>
                </View>
                <WhiteSpace />
                <WingBlank>
                    <Text style={styles.font}>附件</Text>
                    <View style={styles.filebg}>
                        {
                            fileUrls.map((objFile, i) => (
                                <TouchableOpacity
                                    key={Math.random(0, 1)}
                                    onPress={() => {
                                        FileViewer.open(objFile.path)
                                            .then(() => {
                                            // success
                                            })
                                            .catch((error) => {
                                            // error
                                                Toast.info(error, 1, undefined, false);
                                            });
                                    }}
                                    onLongPress={() => { delFile(i); }}
                                    style={styles.file}
                                >
                                    <Feather
                                        name="file"
                                        size={60}
                                        color="#017BFF"
                                        style={{ marginRight: 5 }}
                                    />
                                    <Text
                                        numberOfLines={1}
                                        ellipsizeMode="middle"
                                    >
                                        {objFile.fileName}
                                    </Text>
                                </TouchableOpacity>
                            ))
                        }
                        <TouchableOpacity
                            onPress={() => { pickFile(); }}
                            style={styles.filePick}
                        >
                            <Feather
                                name="file-plus"
                                size={60}
                                color="#017BFF"
                                style={{ marginRight: 5 }}
                            />
                        </TouchableOpacity>
                    </View>
                    <View style={styles.timebg}>
                        <Text style={styles.time}>
                            {`于${moment(detail.complete_time).format('YY-MM-DD hh:mm')}完成`}
                        </Text>
                    </View>
                </WingBlank>
            </ScrollView>
        </View>
    );
};

AccRpDetail.defaultProps = {
    route: {},
};
AccRpDetail.propTypes = {
    route: PropTypes.objectOf(PropTypes.any),
};
export default AccRpDetail;
